<template>
  <router-link
    :to="{name: 'classDetail', query: {
      packageId: item.Id,
      title: item.Name,
      img: item.ShowCoverUrl}}"
    tag="div"
    class="class-item"
  >
    <div
      class="class-item-img-box"
    >
      <img
        v-lazy="item.ShowCoverUrl"
        class="class-cover"
      >
      <div>
        <span
          class="class-type"
        >
          {{ item.TypeName }}
        </span>
      </div>
    </div>
    <div class="class-item-info-box">
      <div class="add-mark">
        <div class="w100">
          <div class="class-name">
            {{ item.Name }}
          </div>
          <div
            class="class-fit-people"
          >
            介绍：{{ item.Description ? item.Description : '无' }}
          </div>
        </div>
      </div>
      <div class="class-people">
        {{ item.EnrollCount }}人报名
      </div>
      <!-- 未购买 -->
      <div
        v-show="!item.isBuy"
        class="class-car"
      >
        <div
          class="class-price-box"
        >
          <span class="class-original-price">
            ￥{{ item.OldPrice }}
          </span>
          <span class="class-price">
            ￥{{ item.NowPrice }}
          </span>
        </div>
      </div>
      <!-- 已购买 -->
      <div
        v-if="item.isBuy"
        class="class-car"
      >
        <img
          src="~assets/home/registered.png"
          class="class-registered"
        >
      </div>
    </div>
  </router-link>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    item: {
      default: () => ({}),
      type: Object,
    },
  },
  data () {
    return {

    }
  },
})
</script>

<style lang="scss" scoped>
  @import "~scss/class/class.scss";
  .class-original-price {
    color: #A4A9B2;
    background-color: #ffffff;
    font-size: 22px;
    text-decoration: line-through;
  }
.discount-price-text {
  color: #4B515E;
  font-size: 22px;
  .discount-price {
    color: #CC3300;
    font-size: 28px;
  }
}
</style>
